<template>
  <div id="message">
    <div class="tab-wrap">
      <div class="item" :class="selTab == 1? 'on' : ''" @click="chagneTab(1)">业主大会公示</div>
      <div class="item" :class="selTab == 2? 'on' : ''" @click="chagneTab(2)">候选人公示</div>
    </div>
    <div class="message-list" ref="wrapper">
      <div class="bscroll-container">
        <!-- 刷新提示信息 -->
        <div class="top-tip">
          <span class="refresh-hook">{{pulldownMsg}}</span>
        </div>
        <!-- 内容列表 -->
        <ul class="content" v-if="list.length != 0 && selTab == 1">
          <li
            class="scroll-item"
            v-for="(item,index) in list"
            :key="index"
            @click="navDetail(index)"
          >
            <div class="top">
              <span class="id">公告编号：{{item.signup_id}}</span>
              <span class="status">发布人：业主大会</span>
            </div>
            <div class="mid">
              <h3>{{item.title}}</h3>
            </div>
            <div class="bottom">
              <p class="time">公示期：{{item.add_time}}-{{item.end_time}}</p>
            </div>
          </li>
        </ul>
        <!-- 内容列表 -->
        <ul class="contentx" v-if="houList.length != 0 && selTab == 2">
          <li
            class="scroll-item-vote"
            v-for="(item,index) in houList"
            :key="index"
            @click="navVoteDetail(index)"
          >
            <div class="top">
              <span class="id">公告编号：{{item.signup_id}}</span>
              <!-- <span class="status">发布人：业主大会</span> -->
            </div>
            <div class="mid">
              <h3>{{item.title}}</h3>
            </div>
            <div class="bottom">
              <p class="time">公示截止至：{{item.end_time}}</p>
            </div>
          </li>
        </ul>
        <ul
          class="content"
          v-if="(list.length == 0 && selTab == 1) || (houList.length == 0 && selTab == 2)"
        >
          <li class="empty-list">暂无通知</li>
        </ul>
        <!-- 底部提示信息 -->
        <div class="bottom-tip">
          <span class="loading-hook">{{pullupMsg}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "better-scroll";
import { Toast, Dialog } from "mand-mobile";
import https from "@/https";
import config from "@/config";
export default {
  components: {
    [Dialog.name]: Dialog
  },
  name: "publicity",
  data() {
    return {
      pulldownMsg: "下拉刷新",
      pullupMsg: "加载更多",
      list: [], //公示
      pn: 1, //公示页码
      houList: [], //候选人公示列表
      houPn: 1 //候选人页码
    };
  },
  computed: {
    selTab() {
      return this.$store.state.publicityType;
    }
  },
  methods: {
    chagneTab(index) {
      this.$store.commit("savePublicityType", index);
      if (index == 1) {
        this.getNotice();
      } else if (index == 2) {
        this.getVoteList();
      }
    },
    // 获取公示列表
    getNotice() {
      Toast.loading("加载中...");
      let qid = this.$store.state.residentialType.qid;
      let params = {
        qid,
        pn: 1,
        pagesize: 10
      };
      https
        .fetchPost(config.getNotice, params)
        .then(res => {
          Toast.hide();
          if (res.data.code == 1) {
            let list = res.data.data;
            if (list.length != 0) {
              list.forEach(element => {
                element.add_time = this.dataFormat(element.add_time * 1000, 2);
                element.end_time = this.dataFormat(element.end_time * 1000, 2);
              });
            } else {
              // Toast.failed("目前没有通知");
            }
            this.pn = 1;
            this.list = list;
            //恢复刷新提示文本值
            this.pulldownMsg = "下拉刷新";
            //刷新列表后，重新计算滚动区域高度
            this.scroll.refresh();
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          Toast.hide();
          console.log(err);
        });
    },
    // 加载公示更多
    getMoreNotice() {
      let pagesize = 10; //条数
      let pn = this.pn;
      pn++;
      let qid = this.$store.state.residentialType.qid;
      let params = {
        qid,
        pn,
        pagesize
      };
      https
        .fetchPost(config.getNotice, params)
        .then(res => {
          if (res.data.code == 1) {
            if (res.data.data.length != 0) {
              let oldList = this.list;
              let newList = res.data.data;
              newList.forEach(element => {
                element.add_time = this.dataFormat(element.add_time * 1000, 2);
                element.end_time = this.dataFormat(element.end_time * 1000, 2);
              });
              this.list = oldList.concat(newList);
              this.pn = pn;
              //恢复文本值
              this.pullupMsg = "加载更多";
              this.scroll.refresh();
            } else {
              Toast.failed("没有更多咯");
            }
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取候选人公示列表
    getVoteList() {
      Toast.loading("加载中...");
      let qid = this.$store.state.residentialType.qid;
      let params = {
        qid,
        pn: 1,
        pagesize: 10
      };
      https
        .fetchPost(config.getVoteList, params)
        .then(res => {
          Toast.hide();
          if (res.data.code == 1) {
            let list = res.data.data;
            if (list.length != 0) {
              list.forEach(element => {
                // element.add_time = this.dataFormat(element.add_time * 1000, 2);
                element.end_time = this.dataFormat(element.end_time * 1000, 2);
              });
            }
            this.houPn = 1;
            this.houList = list;
            //恢复刷新提示文本值
            this.pulldownMsg = "下拉刷新";
            //刷新列表后，重新计算滚动区域高度
            this.scroll.refresh();
          } else {
            Toast.failed(res.data.msg);
          }
        })
        .catch(err => {
          Toast.hide();
          console.log(err);
        });
    },
    // // 加载候选人公示更多
    // getMoreVoteList() {
    //   let pagesize = 10; //条数
    //   let pn = this.houPn;
    //   pn++;
    //   let qid = this.$store.state.residentialType.qid;
    //   let params = {
    //     qid,
    //     pn,
    //     pagesize
    //   };
    //   https
    //     .fetchPost(config.getVoteList, params)
    //     .then(res => {
    //       if (res.data.code == 1) {
    //         if (res.data.data.length != 0) {
    //           let oldList = this.houList;
    //           let newList = res.data.data;
    //           // newList.forEach(element => {
    //           //   element.add_time = this.dataFormat(element.add_time * 1000, 2);
    //           //   element.end_time = this.dataFormat(element.end_time * 1000, 2);
    //           // });
    //           this.houList = oldList.concat(newList);
    //           this.houPn = pn;
    //           //恢复文本值
    //           this.pullupMsg = "加载更多";
    //           this.scroll.refresh();
    //         } else {
    //           Toast.failed("没有更多咯");
    //         }
    //       } else {
    //         Toast.failed(res.data.msg);
    //       }
    //     })
    //     .catch(err => {
    //       console.log(err);
    //     });
    // },

    navDetail(index) {
      let yid = this.list[index].yid;
      this.$router.push({
        path: "/publicityDetail",
        query: { yid: yid }
      });
    },
     navVoteDetail(index) {
      let bid = this.houList[index].bid;
      let signup_id = this.houList[index].signup_id;
      this.$router.push({
        path: "/publicityVoteDetail",
        query: { bid: bid,signup_id:signup_id }
      });
    },
    // 时间戳转换
    dataFormat(num, type) {
      var dd = new Date(num);
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();
      var h = dd.getHours();
      var i = dd.getMinutes();
      var s = dd.getSeconds();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      h = h < 10 ? "0" + h : h;
      i = i < 10 ? "0" + i : i;
      s = s < 10 ? "0" + s : s;
      if (type == 1) {
        return y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s;
      } else {
        return y + "-" + m + "-" + d;
      }
    }
  },
  created() {
    window.scrollTo(0, 0);
    const that = this;
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        //初始化better-scroll
        probeType: 1, //1 滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
        click: true //是否派发click事件
      });
      // 滑动过程中事件
      this.scroll.on("scroll", pos => {
        if (pos.y > 30) {
          this.pulldownMsg = "释放立即刷新";
        }
      });
      //滑动结束松开事件
      this.scroll.on("touchEnd", pos => {
        //上拉刷新
        if (pos.y > 30) {
          if (this.selTab == 1) {
            this.getNotice();
          } else {
            this.getVoteList();
          }
        } else if (pos.y < this.scroll.maxScrollY - 30) {
          //下拉加载
          this.pullupMsg = "加载中。。。";
          if (this.selTab == 1) {
            this.getMoreNotice();
          } else {
            // this.getMoreVoteList();
          }
        }
      });
    });
    if (this.selTab == 1) {
      this.getNotice();
    } else {
      this.getVoteList();
    }
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.md-notice-bar {
  z-index: 1;
}
button {
  z-index: 1;
}
#message {
  .tab-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    background: #fff;
    z-index: 999 !important;
    border-bottom: 1px solid #f2f2f2;
    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      height: 80px;
      font-size: 30px;
      color: #666;
      &.on {
        color: #2f86f6;
        box-shadow: inset 0 -4px 0 #2f86f6;
      }
    }
  }
  .message-list {
    height: 100vh;
    .bscroll-container {
    padding-top: 90px;
    min-height: calc(100vh - 90px);

  }
    .scroll-item {
      box-shadow: 0 1px 16px #ddd;
      padding-bottom: 15px;
      border-radius: 8px;
      margin: 0 30px 40px;
      .top {
        padding: 0 20px;
        font-size: 24px;
        color: #fff;
        display: flex;
        background: linear-gradient(to right, #ff4949, #f55d5d);
        justify-content: space-between;
        align-items: center;
        height: 70px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        .status {
          color: #fff;
          font-size: 22px;
        }
      }
      .mid {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 0 20px;
        h3 {
          font-size: 30px;
          line-height: 50px;
          padding: 20px 0 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .bottom {
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        margin-top: 10px;
        .time {
          font-size: 24px;
          color: #999;
          line-height: 50px;
        }
      }
    }
    .scroll-item-vote {
 box-shadow: 0 1px 16px #ddd;
      padding-bottom: 15px;
      border-radius: 8px;
      margin: 0 30px 40px;
      .top {
        padding: 0 20px;
        font-size: 24px;
        color: #fff;
        display: flex;
        background: linear-gradient(to right, #2f86f6, #589cf5);
        justify-content: space-between;
        align-items: center;
        height: 70px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        .status {
          color: #fff;
          font-size: 22px;
        }
      }
      .mid {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: 0 20px;
        h3 {
          font-size: 30px;
          line-height: 50px;
          padding: 20px 0 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .bottom {
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        margin-top: 10px;
        .time {
          font-size: 24px;
          color: #999;
          line-height: 50px;
        }
      }
    }
  }
  .empty-list {
    padding-top: 100px;
    font-size: 30px;
    color: #666;
    text-align: center;
  }

  .top-tip {
    position: absolute;
    top: -40px;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
    text-align: center;
    color: #ccc;
  }
  .bottom-tip {
    width: 100%;
    height: 35px;
    line-height: 35px;
    text-align: center;
    color: #999;
    font-size: 28px;
    position: absolute;
    bottom: -45px;
    left: 0;
  }
}
</style>
